<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>服务器监控</title>
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css" />
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/dtree.css" />
		<!--<link rel="stylesheet" type="text/css" href="${s.base}/fonts/iconfont.css" />-->
	</head>
	<style type="text/css">
		.layui-tab-item{ background:#f2f2f2;}
	</style>
	<body style="background:#f2f2f2;">
	<div class="layui-tab-content" style=" padding: 10px 0;">
		<div class="welcome-left-container marb20 col-lg-6">
			<div class="panel">
				<div class="service-mon-tit"><b>CPU</b>
					<div class="service-mon-tit-right-btn clearfix"><span class="iconfont " onclick="updown(this)">&#xe635;</span><span class="iconfont" onclick="serclose(this)">&#xe610;</span></div>
				</div>
				<div class="layui-form">
					<table class="layui-table border-col-white">
						<thead>
						<tr>
							<th>属性</th>
							<th>值</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>核心数</td>
							<td>2</td>
						</tr>
						<tr>
							<td>用户使用率</td>
							<td>2%</td>
						</tr>
						<tr>
							<td>系统使用率</td>
							<td>2%</td>
						</tr>
						<tr>
							<td>当前空闲率</td>
							<td>2%</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="welcome-left-container marb20 col-lg-6">
			<div class="panel">
				<div class="service-mon-tit"><b>内存</b>
					<div class="service-mon-tit-right-btn clearfix"><span class="iconfont " onclick="updown(this)">&#xe635;</span><span class="iconfont" onclick="serclose(this)">&#xe610;</span></div>
				</div>
				<div class="layui-form">
					<table class="layui-table border-col-white">
						<thead>
						<tr>
							<th>属性</th>
							<th>内存</th>
							<th>JVM</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>总内存</td>
							<td>${server.mem.total}G</td>
							<td>${server.jvm.max}M</td>
						</tr>
						<tr>
							<td>已用内存</td>
							<td>${server.mem.used}G</td>
							<td>${server.jvm.total}M</td>
						</tr>
						<tr>
							<td>剩余内存</td>
							<td>${server.mem.free}G</td>
							<td>${server.jvm.free}M</td>
						</tr>
						<tr>
							<td>使用率</td>
							<td>${server.mem.used/server.mem.total}%</td>
							<td>${server.jvm.total/server.jvm.max}%</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!--服务器信息开始-->
		<div class="welcome-left-container marb20 col-lg-12">
			<div class="panel">
				<div class="service-mon-tit"><b>服务器信息</b>
					<div class="service-mon-tit-right-btn clearfix"><span class="iconfont " onclick="updown(this)">&#xe635;</span><span class="iconfont" onclick="serclose(this)">&#xe610;</span></div>
				</div>
				<div class="layui-form">
					<table class="layui-table border-col-white">
						<thead>
						<tr>
							<th>服务器名称</th>
							<th>服务器IP</th>
							<th>操作系统</th>
							<th>系统架构</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>${server.sys.computerName}</td>
							<td>${server.sys.computerIp}</td>
							<td>${server.sys.osName}</td>
							<td>${server.sys.osArch}</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!--服务器信息结束-->
		<!--JAVA虚拟机信息-->
		<div class="welcome-left-container marb20 col-lg-12">
			<div class="panel">
				<div class="service-mon-tit"><b>Java虚拟机信息</b>
					<div class="service-mon-tit-right-btn clearfix"><span class="iconfont " onclick="updown(this)">&#xe635;</span><span class="iconfont" onclick="serclose(this)">&#xe610;</span></div>
				</div>
				<div class="layui-form">
					<table class="layui-table border-col-white table-left-item-title">
						<tr>
							<td>Java名称</td>
							<td>Java HotSpot(TM) 64-Bit Server VM</td>
							<td>Java版本</td>
							<td>${server.jvm.version}</td>
						</tr>
						<tr>
							<td>启动时间</td>
							<td>${server.jvm.startTime}</td>
							<td>运行时长</td>
							<td>${server.jvm.runTime}</td>
						</tr>
						<tr>
							<td>安装路径</td>
							<td>${server.jvm.home}</td>
							<td>项目路径</td>
							<td>${server.sys.userDir}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!--JAVA虚拟机信息结束-->
		<!--磁盘状态开始-->
		<div class="welcome-left-container marb20 col-lg-12">
			<div class="panel">
				<div class="service-mon-tit"><b>磁盘状态</b>
					<div class="service-mon-tit-right-btn clearfix"><span class="iconfont " onclick="updown(this)">&#xe635;</span><span class="iconfont" onclick="serclose(this)">&#xe610;</span></div>
				</div>
				<div class="layui-form">
					<table class="layui-table border-col-white">
						<thead>
						<tr>
							<th>盘符路径</th>
							<th>文件系统</th>
							<th>盘符类型</th>
							<th>总大小</th>
							<th>可用大小</th>
							<th>已用大小</th>
							<th>已用百分比</th>
						</tr>
						</thead>
						<tbody>
							<#list server.sysFiles as sysFile>
								<tr>
									<td>${sysFile.dirName}</td>
									<td>${sysFile.typeName}</td>
									<td>${sysFile.sysTypeName}</td>
									<td>${sysFile.total}</td>
									<td>${sysFile.free}</td>
									<td>${sysFile.used}</td>
									<td>${sysFile.usage}%</td>
								</tr>
							</#list>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!--磁盘状态结束-->
	</div>
	<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script>
	function updown(obj){
		$(obj).parent().parent().parent().find('.layui-form').toggleClass('hide');
        $(obj).toggleClass('rotate');
     	}
    function serclose(obj){
        $(obj).parent().parent().parent().hide();
    }
    // layui.use(['jquery','table','page'],function(){
    //     var $ = layui.jquery,
    //         table = layui.table,
    //         page = layui.page;
    //     $('.service-mon-tit-right-btn span:nth-child(1)').click(function(){
    //         $(this).parent().parent().parent().find('.layui-form').toggleClass('hide');
    //     })
	//
	//
    // })
	</script>
</html>